<template>
  <div class="order">
    <div class="title-msg">交易管理</div>

    <div class="option-site">

      <div class="option-site-head"><span>交易列表</span></div>

      <div class="option-site-neck">
        <Neck @search="mSearch"
              :less-price="transactionListAndRecordInfo.morePrice"
              :more-price="transactionListAndRecordInfo.morePrice"
              :less-date="transactionListAndRecordInfo.lessDate"
              :more-date="transactionListAndRecordInfo.moreDate"
              :username="transactionListAndRecordInfo.username">
        </Neck>
      </div>

      <div class="option-site-table">
        <Table  :list="transactionListAndRecordInfo.page.list"></Table>
        <Footer :count="transactionListAndRecordInfo.page.count"
                :total="transactionListAndRecordInfo.page.total"
                :index="transactionListAndRecordInfo.page.index"
                @pre="mPre"
                @next="mNext">
        </Footer>
      </div>

    </div>

  </div>
</template>

<script>
  import Neck from "./childComps/Neck";
  import Table from "./childComps/Table";
  import Footer from "./childComps/Footer";

  import {getTransaction} from 'network/mix';
  export default {
    name: "Transaction",
    components: {
      Neck,
      Table,
      Footer,
    },
    data() {
      return {
        transactionListAndRecordInfo: { // 用户信息和指定的检索信息
          page: { // 当前数据的信息
            list: [], // 展示的数据集合
            count: 0, // 总记录数
            total: 0, // 总页数
            index: 1, // 当前页,默认第1页
          },
          // id: 0,
          // order_code: '',
          buy_username: '',
          bus_username: '',
          // goodsCategoryId: 0,
          // rootCategoryId: 0,
          lessPrice: 0,
          morePrice: 0,
          lessDate: new Date('2020-11-04 18:41:42'),
          moreDate: new Date(),
        }
      }
    },
    mounted() {
      this.mGetTransaction()
    },
    methods: {
      // id, order_code, buy_username, bus_username, goodsCategoryId, rootCategoryId, lessPrice, morePrice, lessDate, moreDate, i, size
      mGetTransaction() { // 首次获取交易
        getTransaction(0, '', '', '', 0, 0, 0, 0, new Date('2020-11-04 18:41:42'), new Date(), 1, 20)
          .then(res => {
            this.transactionListAndRecordInfo = res;
            // console.log(this.orderListAndRecordInfo);
          })
          .catch(error => {
            console.log('获取订单失败' + error);
          })
      },
      mSearch({buy, bus, lp, mp, ld, md}) {
        getTransaction(0, '', buy, bus, 0, 0, lp, mp, ld, md, 1, 20)
          .then(result => {
            // console.log(result);
            this.transactionListAndRecordInfo = result;
            // console.log(this.goodsListAndRecordInfo);

            this.$bus.$emit('transactionBus',{ // 通过事件总线发送事件,以使footer组件接收,实现搜索后还能使用footer进行上一页和下一页
              buy: buy,
              bus: bus,
              lp: lp,
              mp: module,
              ld: ld,
              md: md,
            })
          })
          .catch(error => {
            console.log('查询订单失败' + error);
          })
      },

      mPre({buy, bus, lp, mp, ld, md, i}) { // 上一页
        getTransaction(0, '', buy, bus, 0, 0, lp, mp, ld, md, i - 1, 20)
            .then(result => {
            // console.log(result);
            this.transactionListAndRecordInfo = result;
            // console.log(this.goodsListAndRecordInfo);

            this.$bus.$emit('transactionBus',{ // 通过事件总线发送事件,以使footer组件接收,实现搜索后还能使用footer进行上一页和下一页
              buy: buy,
              bus: bus,
              lp: lp,
              mp: module,
              ld: ld,
              md: md,
            })
          })
          .catch(error => {
            console.log('获取上一页交易明细失败' + error);
          })

      },
      mNext({buy, bus, lp, mp, ld, md, i}) { // 下一页
        // console.log(un + '---' + co + '---' + la + '---' + ma + '---' + ld + '---' + md + '---' + i);
        getTransaction(0, '', buy, bus, 0, 0, lp, mp, ld, md, i + 1, 20)
            .then(result => {
            // console.log(result);
            this.transactionListAndRecordInfo = result;
            // console.log(this.userListAndRecordInfo);

            this.$bus.$emit('transactionBus',{ // 通过事件总线发送事件,以使footer组件接收,实现搜索后还能使用footer进行上一页和下一页
              buy: buy,
              bus: bus,
              lp: lp,
              mp: module,
              ld: ld,
              md: md,
            })
          })
          .catch(error => {
            console.log('获取下一页交易明细失败' + error);
          })
      },
    }
  }
</script>

<style scoped>
  .order {
    height: 100%;
    /*background-color: green;*/
  }
  .title-msg {
    height: 60px;
    line-height: 60px;
    margin-left: 20px;
    margin-right: 20px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #cdcdcd;

    text-align: center;
    font-size: 30px;

    background-color: white;
  }
  .option-site {
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    /*height: 530px;*/

    border: 1px solid #cdcdcd;
    border-radius: 6px;
    background-color: #fff;
  }
  .option-site-head {
    padding-left: 20px;
    height: 45px;
    line-height: 45px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;

    border-bottom: 1px solid #cdcdcd;
    background-color: green;

    color: white;
  }
  .option-site-neck {
    margin-left: 20px;
    margin-right: 20px;
    height: 60px;
    line-height: 60px;

    border-bottom: 1px solid #cdcdcd;

    /*background-color: green;*/
  }
  /*.option-site-neck select {*/
  /*  width: 100px;*/
  /*  height: 30px;*/
  /*  margin-right: 20px;*/

  /*  border-radius: 4px;*/
  /*  border: 1px solid #cdcdcd;*/
  /*  background-color: #fff;*/
  /*}*/
  /*.option-site-neck .screen-btn {*/
  /*  height: 30px;*/
  /*  width: 60px;*/
  /*  color: white;*/
  /*  border-radius: 4px;*/

  /*  outline: none;*/
  /*  border: none;*/
  /*  background-color: #007bff;*/
  /*}*/
  /*.option-site-neck .screen-btn:hover {*/
  /*  cursor: pointer;*/
  /*  opacity: 0.75;*/
  /*}*/
  /*.option-site-neck .search-text {*/
  /*  width: 200px;*/
  /*  height: 28px;*/
  /*  transform: translateX(120px);*/
  /*}*/
  /*.option-site-neck .search-btn {*/
  /*  height: 32px;*/
  /*  width: 60px;*/
  /*  color: white;*/
  /*  border-radius: 4px;*/
  /*  background-color: #007bff;*/
  /*  transform: translateX(130px);*/

  /*  outline: none;*/
  /*  border: none;*/
  /*}*/
  /*.option-site-neck .search-btn:hover {*/
  /*  cursor: pointer;*/
  /*  opacity: 0.75;*/
  /*}*/
  /*.option-site-neck .add-btn {*/
  /*  transform: translateX(435px);*/

  /*  height: 30px;*/
  /*  width: 80px;*/
  /*  color: white;*/
  /*  border-radius: 4px;*/
  /*  background-color: #28a745;*/

  /*  outline: none;*/
  /*  border: none;*/
  /*}*/
  /*.option-site-neck .add-btn:hover {*/
  /*  cursor: pointer;*/
  /*  opacity: 0.75;*/
  /*}*/

  .option-site-table {
    margin-left: 20px;
    margin-right: 20px;

    height: 70%;

    /*background-color: green;*/
  }
</style>